<template>
	<view>
		<view class="header borderBottom10">
			<!-- 轮播 -->
			<swiper
				class="swiper"
				indicator-color="rgba(255, 255, 255, 0.6)"
				indicator-active-color="rgba(255, 255, 255, 1)"
				@animationfinish="animationChange"
				:circular="true"
				:autoplay="true"
				:interval="3000"
				:duration="1000"
				:current="swiperCurrent"
			>
				<swiper-item @click="perviewImg(item, index)" v-for="(item,index) in swiperImg" :key="'img'+index"><image class="swiper-item" :src="item" mode=""></image></swiper-item>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<view class="dots">
				<block>
					<text class="dot">{{ swiperCurrent + 1 }}/{{ swiperImg.length }}</text>
				</block>
			</view>
			<!-- 标题 -->
			<view class="title">
				<text>确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#3CC51F"，百度小程序平台默认为"#3c76ff"</text>
			</view>
			<view class="shopsType">
				<view class="shopsType_icons">
					商品
				</view>
				<text style="margin-right: 110rpx;color: #333;">总换商品</text>
				<text style="margin-right: 10rpx;color: #4b76f9;">10</text>
				<text style="margin-right: 10rpx;">积分</text>
				<text style="margin-right: 10rpx;color: #4b76f9;">+50</text>
			</view>
		</view>
		<view class="container">
			<view class="container_top">
				<text class="blueLine" style="display: inline-block;"></text>
				<text>详情展示</text>
			</view>
			<view class="imgList" v-for="(item,index) in swiperImg" :key="index">
				<image :src="item" mode=""></image>
			</view>
		</view>
		<view style="height: 124rpx;width: 750rpx">
			
		</view>
		<view class="footer" >
			<view class="save">
				立即兑换
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperCurrent: 0,
				swiperImg: [
					'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg',
					'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg',
					'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg',
					'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg',
					'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg'
				],
			};
		},
		methods:{
			animationChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			perviewImg(item, index) {
				uni.previewImage({
					urls: this.swiperImg,
					current: this.swiperImg[index],
					indicator: 'number',
					loop: true,
					success() {}
				});
			}
		}
	}
</script>

<style lang="scss">
@import './css/shopsDetail.scss';
</style>
